<template>
  <div>
    <a-modal
      v-model="visible"
      :title="`${moment(this.jsonData.timeDay).format('YYYY/MM/DD')}打卡记录`"
      width="1000px"
      :footer="null"
      @cancel="$emit('update:visible', false)"
    >
      <a-row>
        <a-col :span="3">
          <a-avatar v-if="this.jsonData.empPhoto !== null" :key="this.jsonData.empPhoto" :src="this.jsonData.empPhoto" :size="64" />
          <a-avatar v-else icon="user" :size="64" />
        </a-col>
        <a-col :span="20" class="info">
          <div style="font-size: 18px;font-weight: 500;padding-bottom: 5px">
            {{ this.jsonData.empInfoName }}
          </div>
          <div>
            <span>部门：{{ this.jsonData.deptName }}</span>
            <a-divider type="vertical" />
            <span>所属规则：{{ this.jsonData.attendPlanName }}</span>
          </div>
        </a-col>
      </a-row>

      <div class="xq-form-wrapper">
        <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
          <XqTable
            :customize="FormJson['config']['table']['customize']"
            :pagination="false"
            :dataSource="tableData"
            :columns="columns"
            class="xq-form-content-table"
          >
            <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
              <span :key="index">
                {{ col.customTitle }}
              </span>
            </template>
            <!-- eslint-disable-next-line prettier/prettier -->
            <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
              <div v-if="col.dataIndex === 'punchTime' || col.dataIndex === 'arriveTwo.arriveTime'" :key="index">
                {{ text ? moment(text).format("YYYY-MM-DD HH:mm") : "--" }}
              </div>
              <div v-else-if="col.dataIndex === 'punchType' || col.dataIndex === 'arriveTwo.arriveTime'" :key="index">
                {{ type[text - 1] }}
              </div>
              <div v-else-if="col.dataIndex === 'punchStatus' || col.dataIndex === 'arriveTwo.arriveTime'" :key="index">
                <div>{{ status[text] }}</div>
                <a-tag v-if="record.isCalibration" color="blue">
                  管理员校准
                </a-tag>
              </div>
              <div v-else-if="col.dataIndex === 'punchSource' || col.dataIndex === 'arriveTwo.arriveTime'" :key="index">
                {{ equipStatus[text - 1] }}
              </div>
              <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
                <a :class="isNow ? 'noClickStatus' : 'clickStatus'" @click="enterFix(record)">校准</a>
              </span>
              <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
            </template>
          </XqTable>
        </a-spin>
      </div>
    </a-modal>
    <fix :visible.sync="fixShow" :jsonData="fixJsonData" @onUpdate="onUpdate" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

import fix from "./fix";
import { checkStaffDay } from "@/api/check/checkCard";
import moment from "moment";

const type = ["上班打卡", "下班打卡", "上班缺卡", "下班缺卡"];
const status = ["无效打卡", "正常", "迟到", "早退"];
const equipStatus = ["APP打卡", "考勤机打卡", "EXCEL导入"];

export default {
  mixins: [curdMixin],
  components: {
    fix
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    jsonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      spinning: false,
      tableData: [],
      fixShow: false,
      isNow: true,
      type,
      status,
      equipStatus,
      fixJsonData: {}
    };
  },
  watch: {
    visible(v) {
      if (v) this.getCheckStaffDay();
    }
  },
  methods: {
    async getCheckStaffDay() {
      try {
        this.spinning = true;
        const { timeDay, empInfoId } = this.jsonData;
        const nowDay = moment().format("YYYY-MM-DD");
        if (moment(timeDay, "YYYY-MM-DD").valueOf() !== moment(nowDay, "YYYY-MM-DD").valueOf()) {
          this.isNow = false;
        } else {
          this.isNow = true;
        }
        const { data } = await checkStaffDay({
          year: moment(timeDay).format("YYYY"),
          month: moment(timeDay).format("MM"),
          day: moment(timeDay).format("DD"),
          empInfoId,
          companyId: this.$store.state.hr.companyId
        });
        this.tableData = data;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    enterFix(record) {
      let n = null;
      this.tableData.map((e, i) => {
        if (record.id === e.id) n = i + 1;
      });
      if (this.isNow) return;
      this.fixJsonData.punchRecordId = record.id;
      this.fixJsonData.number = n;
      this.fixJsonData.time = moment(record.punchTime ? record.punchTime : this.jsonData.timeDay);
      this.fixJsonData.note = record.remark;
      this.fixShow = true;
    },
    onUpdate() {
      this.getCheckStaffDay();
      this.$emit("onUpdate");
    }
  }
};
</script>
<style lang="scss" scoped>
.noClickStatus {
  color: #999 !important;
}
.clickStatus {
  color: var(--primary);
  cursor: pointer;
}
</style>
